<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<view class="l-title">
			注册
		</view>
		<view class="login-view">
			<view class="l-login">
				<form class="l-form">
					<view class="l-info">
						<u-input
							customStyle="padding: 24rpx 18rpx 24rpx 0;"
						    placeholder="请输入姓名"
						    border="bottom"
							prefixIcon="account"
							prefixIconStyle="font-size: 24px;color: #909399"
							maxlength="20" 
							v-model="regObj.username"
						    clearable></u-input>
					</view>
					<view class="l-info">
						<u-input
							customStyle="padding: 24rpx 18rpx 24rpx 0;"
						    placeholder="请输入邮箱"
						    border="bottom"
							prefixIcon="email"
							prefixIconStyle="font-size: 24px;color: #909399"
							v-model="regObj.email"
						    clearable></u-input>
					</view>
					<view class="l-info">
						<u-input
							customStyle="padding: 24rpx 18rpx 24rpx 0;"
						    placeholder="请输入手机号"
						    border="bottom"
							prefixIcon="phone"
							prefixIconStyle="font-size: 24px;color: #909399"
							maxlength="11"
							v-model="regObj.phone"
						    clearable></u-input>					
					</view>
					<view class="l-info">
						<u-input
							customStyle="padding: 24rpx 18rpx 24rpx 0;"
						    placeholder="请输入密码"
						    border="bottom"
							prefixIcon="lock"
							prefixIconStyle="font-size: 24px;color: #909399"
							maxlength="8"
							:password="true"
							v-model="regObj.password"
						    clearable></u-input>
					</view>
					<view class="l-info">
						<u-input
							customStyle="padding: 24rpx 18rpx 24rpx 0;"
						    placeholder="请确认密码"
						    border="bottom"
							prefixIcon="lock"
							prefixIconStyle="font-size: 24px;color: #909399"
							maxlength="8"
							:password="true"
							v-model="regObj.surePassword"
						    clearable></u-input>
					</view>
					<u-button @click="register()" shape="circle" color="#45c5e9">注册</u-button>
					<view class="login" @click="login()">已有账号</view>
				</form>
			</view>
		</view>
		<view class="l-buttom">
			<view class="hint">
				<u-checkbox-group>
					<u-checkbox :checked="checked" shape="circle" activeColor="#1C5AD2" 
					size="14" @change="getchecked"></u-checkbox>
				</u-checkbox-group>
				<text>已阅读并同意</text>
				<text class="link" @click="privacy">《用户协议、隐私政策》</text>
			</view>
		</view>
	</view>
</template>
<script>
import {mobilePattern,validateEmail} from "@/common/vit.js"
export default {
	data() {
		return {
			regObj: {
				username: "",
				email: "",
				phone: "",
				password: "",
				surePassword: "",
				checked: false
			}
		}
	},
	methods: {
		getchecked( val ){
			this.checked = val;
		},
		register() {
			const that = this;
			if(!this.regObj.username){
				return this.$refs.uToast.show({
					message: '姓名不能为空',
					type: 'default',
				})
			}
			if(!validateEmail(this.regObj.email)){
				return this.$refs.uToast.show({
					message: '请输入正确的邮箱',
					type: 'default',
				})
			}
			if(!mobilePattern(this.regObj.phone)){
				return this.$refs.uToast.show({
					message: '请输入正确的手机号',
					type: 'default',
				})
			}
			if(!this.regObj.password){
				return this.$refs.uToast.show({
					message: '密码不能为空',
					type: 'default',
				})
			}
			if(!this.regObj.surePassword){
				return this.$refs.uToast.show({
					message: '确认密码不能为空',
					type: 'default',
				})
			}
			if(this.regObj.password != this.regObj.surePassword){
				return this.$refs.uToast.show({
					message: '两次填写密码不相同',
					type: 'default',
				})
			}
			if(!this.checked) {
				return this.$refs.uToast.show({
					message: '请勾选同意协议',
					type: 'default',
				})
			}
			let data = {
				username: this.regObj.username,
				password: this.regObj.password,
				nickname: "贾半仙",
				email: this.regObj.email,
				mobile: this.regObj.phone,
				description: "合伙人律师",

			}
			uni.showLoading({
				title:"加载中"
			})
			this.$sendRequest.getRegister(data).then((res)=> {
				uni.hideLoading();
				if(res.code == 200) {
					this.$u.route({
						url: 'pages/login/login/login'
					})
				} else {
					this.$refs.uToast.show({
						message: res.message,
						type: 'error',
					})
				}	
			}).catch(err=> {
				uni.hideLoading();
			})
		},
		login(){
			this.$u.route({
				url: 'pages/login/login/login'
			})
		},
		privacy(){
			this.$u.route({
				url: 'pages/login/privacy'
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.l-title {
	font-size: 48rpx;
	color: #565d69;
	padding: 60rpx 0 30rpx 8%;
	font-weight: bold;
}
.login-view {
	width: 100%;
	position: relative;
	padding-top: 16rpx;
	.l-login {
		width: 80%;
		margin: 0 auto;
		font-size: 28rpx;
		.l-form {
			zoom: 1;
			.l-info {
				margin-bottom: 12rpx;
			}
		}
		.l-form:after {
			clear: both;
			display: block;
			visibility: hidden;
			height: 0;
			content: '\20';
		}
	}
}
.l-login /deep/ .u-button {
	font-size: 36rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	font-weight: bold;
	box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
	margin-top: 80rpx;
}
.l-login .uni-input-placeholder {
	color: #aeaeae;
	font-size: 32rpx;
}
</style>